<script type="text/javascript" src="/cubes/js/jQuery/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script>
	function ajaxFileUpload()
    {
        //starting setting some animation when the ajax starts and completes
        $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })
        .ajaxComplete(function(){
            $(this).hide();
        });
        
        /*
            prepareing ajax file upload
            url: the url of script file handling the uploaded files
                        fileElementId: the file type of input element id and it will be the index of  $_FILES Array()
            dataType: it support json, xml
            secureuri:use secure protocol
            success: call back function when the ajax complete
            error: callback function when the ajax failed
            
                */
        $.ajaxFileUpload
        (
            {
                url:'doajaxfileupload.php', 
                secureuri:false,
                fileElementId:'fileToUpload',
                dataType: 'json',
                success: function (data, status)
                {
                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != '')
                        {
                            alert(data.error);
                        }else
                        {
							var image = document.getElementById('image');
							
							//alert(image);
							
							image.src = data.msg;
                            alert(data.msg);
                        }
                    }
                },
                error: function (data, status, e)
                {
                    alert(e);
                }
            }
        )
        
        return false;

    } 

</script>
<img id="loading" src="/cubes/css/admin/images/progress_indicator.gif" style="display:none;">
<table cellpadding="0" cellspacing="0" class="tableForm">

		<thead>
			<tr>
				<th>Ajax File Upload</th>
			</tr>
		</thead>
		<tbody>	
			<tr>
				<td><img src="blank.gif" id="image"></td>	

			</tr>

			<tr>
				<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input" onchange="return ajaxFileUpload();"></td>	

			</tr>
			<tr>
				<td>Please select an image</td>
			</tr>
		</tbody>
			<!--tfoot>
				<tr>
					<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
				</tr>
			</tfoot-->
	
	</table>
